<script setup lang="ts">
import {useTransition} from '@vueuse/core'
import dayjs from "dayjs";
import {toast} from "@/utils/useLayer";
import type {FormInstance, FormRules} from "element-plus";
import {VueDraggable} from "vue-draggable-plus";

const source = ref(0)
const outputValue = useTransition(source, {
  duration: 1100,
})
source.value = 110

const projects = ref([
  {
    title: 'GitHub',
    desc: '不要等待机会，而要创造机会。',
    group: '开源组',
    src: 'https://www.github.com/swq2024',
    date: dayjs().format('YYYY-MM-DD')
  }, {
    title: 'Vue',
    desc: '现在的你决定将来的你。',
    group: '框架组',
    src: 'https://vue3js.cn/',
    date: dayjs().format('YYYY-MM-DD')
  }, {
    title: 'Javascript',
    desc: '没有什么才能比努力更重要。',
    group: '算法组',
    src: 'https://developer.mozilla.org/zh-CN/',
    date: dayjs().format('YYYY-MM-DD')
  }, {
    title: 'UnoCSS',
    desc: '热情和欲望可以突破一切难关。',
    group: '开源组',
    src: 'https://unocss.dev/',
    date: dayjs().format('YYYY-MM-DD')
  }, {
    title: 'React',
    desc: '健康的身体是实现目标的基石。',
    group: '框架组',
    src: 'https://react.docschina.org/',
    date: dayjs().format('YYYY-MM-DD')
  }, {
    title: 'Typescript',
    desc: 'only You Are Your OwnSavior.',
    group: '开源组',
    src: 'https://www.typescriptlang.org/',
    date: dayjs().format('YYYY-MM-DD')
  },
])

const todos = ref([
  {id: "1", text: "Learn UnoCSS", type: "submit", completed: false},
  {id: "2", text: "Build a website", type: "check", completed: true},
  {id: "3", text: "Launch a product", type: "code", completed: false},
  {id: "4", text: "Learn UnoCSS", type: "submit", completed: false},
  {id: "5", text: "Build a website", type: "check", completed: true},
  {id: "6", text: "Launch a product", type: "code", completed: false},
  {id: "7", text: "Launch a product", type: "code", completed: false},
  {id: "8", text: "Launch a product", type: "code", completed: false},
]);

// const events = ref([
//   {title: "Team Meeting", time: "10:00 AM", color: "indigo"},
//   {title: "Lunch Break", time: "12:00 PM", color: "green"},
//   {title: "Project Deadline", time: "5:00 PM", color: "red"},
// ]);

const addTodoRef = ref<FormInstance>()

const addTodoForm = ref({
  type: '',
  content: '',
  date: dayjs().format('YYYY-MM-DD')
})

const rules = ref<FormRules<typeof addTodoForm>>({
  type: [
    {
      type: 'string',
      required: true,
      message: '待办事项类型不能为空',
      trigger: 'blur'
    }
  ],
  content: [
    {
      type: 'string',
      required: true,
      message: '待办事项内容不能为空',
      trigger: 'blur'
    }

  ],
  date: [
    {
      type: 'string',
      required: true,
      message: '待办事项时间不能为空',
      trigger: 'blur'
    }
  ]
})

const todoDialogRef = ref(null)
// 打开添加待办弹窗
const addTodo = () => {
  todoDialogRef.value.openDialog()
}
const handleSubmit = (FormEl: FormInstance | undefined) => {
  if (!FormEl) return;
  FormEl.validate((valid: boolean) => {
    if (!valid) return;
    else {
      toast('添加成功')
      // TODO: 添加待办事项事件
      todoDialogRef.value.closeDialog()
    }
  })
}
</script>

<template>
  <div>
    <!-- info -->
    <el-card shadow="never">
      <div p-2 lg:flex>
        <div size-20 relative flex flex-shrink-0 items-center>
        <span inline-flex items-center justify-center font-normal text-foreground select-none shrink-0 bg-secondary
              overflow-hidden rounded-full text-xs size-full>
          <img src="https://s2.loli.net/2024/09/20/sulA4E7G6PbxLCa.jpg" alt="avatar" w-full h-full
               object-cover/>
        </span>
        </div>

        <div flex flex-col justify-center md:ml-6 md:mt-0>
          <h1 font-semibold md:text-xl>
            早安, Blue, 开始您一天的工作吧！
          </h1>
          <span text-gray-5 mt-1 text-sm>
          今日晴，20℃ - 32℃！
        </span>
        </div>

        <div mt-4 flex flex-1 justify-end md:mt-0 mr-10>
          <el-statistic :value="8" flex flex-col justify-center text-center>
            <template #title>
              <div text-xl>
                项目
              </div>
            </template>
          </el-statistic>

          <el-statistic :value="6" mx-12 flex flex-col justify-center text-center md:mx-16>
            <template #title>
              <div text-xl>
                待办
              </div>
            </template>
            <template #suffix>/8</template>
          </el-statistic>

          <el-statistic :value="outputValue" mr-4 flex flex-col justify-center text-center md:mr-10>
            <template #title>
              <div text-xl>
                用户数
              </div>
            </template>
          </el-statistic>

        </div>
      </div>
    </el-card>

    <div mt-5 flex flex-col lg:flex-row>
      <!--left-->
      <div mr-4 w-full class="lg:w-3/5">
        <!--  项目 -->
        <el-card shadow="never">
          <template #header>
            <h3 font-semibold tracking-tight text-lg>项目</h3>
          </template>
          <template #default>
            <div flex flex-wrap p-0>
              <div v-for="(item, index) in projects" :key="index" class="project-item">
                <div flex items-center>
                  <svg v-if="item.title === 'GitHub'" xmlns="http://www.w3.org/2000/svg"
                       aria-hidden="true"
                       role="img"
                       class="size-8 transition-all duration-300 group-hover:scale-110 iconify iconify--carbon"
                       width="1em" height="1em" viewBox="0 0 32 32">
                    <path fill="currentColor" fill-rule="evenodd"
                          d="M16 2a14 14 0 0 0-4.43 27.28c.7.13 1-.3 1-.67v-2.38c-3.89.84-4.71-1.88-4.71-1.88a3.7 3.7 0 0 0-1.62-2.05c-1.27-.86.1-.85.1-.85a2.94 2.94 0 0 1 2.14 1.45a3 3 0 0 0 4.08 1.16a2.93 2.93 0 0 1 .88-1.87c-3.1-.36-6.37-1.56-6.37-6.92a5.4 5.4 0 0 1 1.44-3.76a5 5 0 0 1 .14-3.7s1.17-.38 3.85 1.43a13.3 13.3 0 0 1 7 0c2.67-1.81 3.84-1.43 3.84-1.43a5 5 0 0 1 .14 3.7a5.4 5.4 0 0 1 1.44 3.76c0 5.38-3.27 6.56-6.39 6.91a3.33 3.33 0 0 1 .95 2.59v3.84c0 .46.25.81 1 .67A14 14 0 0 0 16 2"></path>
                  </svg>
                  <svg v-if="item.title === 'Vue'" xmlns="http://www.w3.org/2000/svg"
                       aria-hidden="true"
                       role="img" class="size-8 transition-all duration-300 group-hover:scale-110 iconify iconify--ion"
                       width="1em" height="1em" viewBox="0 0 512 512" style="color: rgb(63, 178, 127);">
                    <path fill="currentColor"
                          d="m256 144.03l-55.49-96.11h-79.43L256 281.61L390.92 47.92h-79.43z"></path>
                    <path fill="currentColor"
                          d="M409.4 47.92L256 313.61L102.6 47.92H15.74L256 464.08L496.26 47.92z"></path>
                  </svg>
                  <svg v-if="item.title === 'Javascript'" xmlns="http://www.w3.org/2000/svg"
                       aria-hidden="true"
                       role="img" class="size-8 transition-all duration-300 group-hover:scale-110 iconify iconify--ion"
                       width="1em" height="1em" viewBox="0 0 512 512" style="color: rgb(235, 217, 78);">
                    <path fill="currentColor"
                          d="M32 32v448h448V32Zm240 348c0 43.61-25.76 64.87-63.05 64.87c-33.68 0-53.23-17.44-63.15-38.49l34.28-20.75c6.61 11.73 11.63 21.65 26.06 21.65c12 0 21.86-5.41 21.86-26.46V240h44Zm99.35 63.87c-39.09 0-64.35-17.64-76.68-42L329 382c9 14.74 20.75 24.56 41.5 24.56c17.44 0 27.57-7.72 27.57-19.75c0-14.43-10.43-19.54-29.68-28l-10.52-4.52c-30.38-12.92-50.52-29.16-50.52-63.45c0-31.57 24.05-54.63 61.64-54.63c26.77 0 46 8.32 59.85 32.68L396 290c-7.22-12.93-15-18-27.06-18c-12.33 0-20.15 7.82-20.15 18c0 12.63 7.82 17.74 25.86 25.56l10.52 4.51c35.79 15.34 55.94 31 55.94 66.16c.01 37.9-29.76 57.64-69.76 57.64"></path>
                  </svg>
                  <svg v-if="item.title === 'UnoCSS'" xmlns="http://www.w3.org/2000/svg" width="2em" height="2em"
                       viewBox="0 0 32 32">
                    <g stroke-width="0.13">
                      <path fill="#858585" d="M17.007 23.491a6.52 6.52 0 1 1 13.04 0a6.52 6.52 0 0 1-13.04 0"/>
                      <path fill="#ccc"
                            d="M17.007 8.51a6.52 6.52 0 0 1 13.04 0v5.867c0 .36-.292.652-.652.652H17.659a.65.65 0 0 1-.652-.652z"/>
                      <path fill="#4d4d4d"
                            d="M14.993 23.491a6.52 6.52 0 1 1-13.04 0v-5.868c0-.36.292-.652.652-.652h11.736c.36 0 .652.292.652.652z"/>
                    </g>
                  </svg>
                  <svg v-if="item.title === 'React'" xmlns="http://www.w3.org/2000/svg" width="2em" height="2em"
                       viewBox="0 0 32 32">
                    <circle cx="16" cy="15.974" r="2.5" fill="#00d8ff"/>
                    <path fill="#00d8ff"
                          d="M16 21.706a28.4 28.4 0 0 1-8.88-1.2a11.3 11.3 0 0 1-3.657-1.958A3.54 3.54 0 0 1 2 15.974c0-1.653 1.816-3.273 4.858-4.333A28.8 28.8 0 0 1 16 10.293a28.7 28.7 0 0 1 9.022 1.324a11.4 11.4 0 0 1 3.538 1.866A3.4 3.4 0 0 1 30 15.974c0 1.718-2.03 3.459-5.3 4.541a28.8 28.8 0 0 1-8.7 1.191m0-10.217a28 28 0 0 0-8.749 1.282c-2.8.977-4.055 2.313-4.055 3.2c0 .928 1.349 2.387 4.311 3.4A27.2 27.2 0 0 0 16 20.51a27.6 27.6 0 0 0 8.325-1.13C27.4 18.361 28.8 16.9 28.8 15.974a2.33 2.33 0 0 0-1.01-1.573a10.2 10.2 0 0 0-3.161-1.654A27.5 27.5 0 0 0 16 11.489"/>
                    <path fill="#00d8ff"
                          d="M10.32 28.443a2.64 2.64 0 0 1-1.336-.328c-1.432-.826-1.928-3.208-1.327-6.373a28.8 28.8 0 0 1 3.4-8.593a28.7 28.7 0 0 1 5.653-7.154a11.4 11.4 0 0 1 3.384-2.133a3.4 3.4 0 0 1 2.878 0c1.489.858 1.982 3.486 1.287 6.859a28.8 28.8 0 0 1-3.316 8.133a28.4 28.4 0 0 1-5.476 7.093a11.3 11.3 0 0 1-3.523 2.189a4.9 4.9 0 0 1-1.624.307m1.773-14.7a28 28 0 0 0-3.26 8.219c-.553 2.915-.022 4.668.75 5.114c.8.463 2.742.024 5.1-2.036a27.2 27.2 0 0 0 5.227-6.79a27.6 27.6 0 0 0 3.181-7.776c.654-3.175.089-5.119-.713-5.581a2.33 2.33 0 0 0-1.868.089A10.2 10.2 0 0 0 17.5 6.9a27.5 27.5 0 0 0-5.4 6.849Z"/>
                    <path fill="#00d8ff"
                          d="M21.677 28.456c-1.355 0-3.076-.82-4.868-2.361a28.8 28.8 0 0 1-5.747-7.237a28.7 28.7 0 0 1-3.374-8.471a11.4 11.4 0 0 1-.158-4A3.4 3.4 0 0 1 8.964 3.9c1.487-.861 4.01.024 6.585 2.31a28.8 28.8 0 0 1 5.39 6.934a28.4 28.4 0 0 1 3.41 8.287a11.3 11.3 0 0 1 .137 4.146a3.54 3.54 0 0 1-1.494 2.555a2.6 2.6 0 0 1-1.315.324m-9.58-10.2a28 28 0 0 0 5.492 6.929c2.249 1.935 4.033 2.351 4.8 1.9c.8-.465 1.39-2.363.782-5.434A27.2 27.2 0 0 0 19.9 13.74a27.6 27.6 0 0 0-5.145-6.64c-2.424-2.152-4.39-2.633-5.191-2.169a2.33 2.33 0 0 0-.855 1.662a10.2 10.2 0 0 0 .153 3.565a27.5 27.5 0 0 0 3.236 8.1Z"/>
                  </svg>
                  <svg v-if="item.title === 'Typescript'" xmlns="http://www.w3.org/2000/svg" width="2em" height="2em"
                       viewBox="0 0 32 32">
                    <path fill="#007acc"
                          d="M23.827 8.243a4.4 4.4 0 0 1 2.223 1.281a6 6 0 0 1 .852 1.143c.011.045-1.534 1.083-2.471 1.662c-.034.023-.169-.124-.322-.35a2.01 2.01 0 0 0-1.67-1c-1.077-.074-1.771.49-1.766 1.433a1.3 1.3 0 0 0 .153.666c.237.49.677.784 2.059 1.383c2.544 1.095 3.636 1.817 4.31 2.843a5.16 5.16 0 0 1 .416 4.333a4.76 4.76 0 0 1-3.932 2.815a11 11 0 0 1-2.708-.028a6.53 6.53 0 0 1-3.616-1.884a6.3 6.3 0 0 1-.926-1.371a3 3 0 0 1 .327-.208c.158-.09.756-.434 1.32-.761l1.024-.6l.214.312a4.8 4.8 0 0 0 1.35 1.292a3.3 3.3 0 0 0 3.458-.175a1.545 1.545 0 0 0 .2-1.974c-.276-.395-.84-.727-2.443-1.422a8.8 8.8 0 0 1-3.349-2.055a4.7 4.7 0 0 1-.976-1.777a7.1 7.1 0 0 1-.062-2.268a4.33 4.33 0 0 1 3.644-3.374a9 9 0 0 1 2.691.084m-8.343 1.483l.011 1.454h-4.63v13.148H7.6V11.183H2.97V9.755a14 14 0 0 1 .04-1.466c.017-.023 2.832-.034 6.245-.028l6.211.017Z"/>
                  </svg>

                  <span class="ml-4 text-lg font-medium">
                    <el-link :href="item.src" target="_blank" rel="noopener noreferrer">
                      {{ item.title }}
                    </el-link>
                  </span>
                </div>
                <div mt-4 flex h-10 text-sm text-gray-5>
                  {{ item.desc }}
                </div>
                <div flex justify-between text-gray-5 text-sm>
                  <span>{{ item.group }}</span>
                  <span>{{ item.date }}</span>
                </div>
              </div>
            </div>
          </template>
        </el-card>

        <!-- 最新动态 -->
        <div mt-5>
          <el-card shadow="never">
            <template #header>
              <h3 font-semibold tracking-tight text-lg>
                最新动态
              </h3>
            </template>
            <div flex flex-wrap p-5 pt-0>
              <ul w-full role="list" v-for="(item, index) in 9" :key="index">
                <li flex justify-between gap-x-6 p-t-6>
                  <div flex min-w-0 items-center gap-x-4>
                    <svg xmlns="http://www.w3.org/2000/svg"
                         aria-hidden="true" role="img"
                         class="size-10 flex-none rounded-full iconic iconify--svg" width="0.7em" height="1em"
                         viewBox="0 0 391.31 560.11">
                      <defs xmlns="http://www.w3.org/2000/svg">
                      </defs>
                      <title xmlns="http://www.w3.org/2000/svg">Asset 15</title>
                      <g xmlns="http://www.w3.org/2000/svg" id="iconifyVue858" data-name="Layer 2">
                        <g id="iconifyVue859" data-name="Layer 1">
                          <circle class="avatar-1-cls-1" cx="45.9" cy="303.35" r="41.4"></circle>
                          <path class="avatar-1-cls-2"
                                d="M78.13,278.08a41.39,41.39,0,0,0-57.27,57.27,41.4,41.4,0,1,1,57.27-57.27Z"></path>
                          <path class="avatar-1-cls-3"
                                d="M45.9,347.82a45.9,45.9,0,1,1,45.89-45.9A46,46,0,0,1,45.9,347.82Zm0-82.79a36.9,36.9,0,1,0,36.89,36.89A36.94,36.94,0,0,0,45.9,265Z"></path>
                          <circle class="avatar-1-cls-1" cx="345.41" cy="303.35" r="41.4"></circle>
                          <path class="avatar-1-cls-3"
                                d="M345.42,347.82a45.9,45.9,0,1,1,45.89-45.9A46,46,0,0,1,345.42,347.82Zm0-82.79a36.9,36.9,0,1,0,36.89,36.89A36.94,36.94,0,0,0,345.42,265Z"></path>
                          <path class="avatar-1-cls-1"
                                d="M191.57,88.78h2.79a146.1,146.1,0,0,1,146.1,146.1v95A147.5,147.5,0,0,1,193,477.43h0a147.5,147.5,0,0,1-147.5-147.5v-95a146.1,146.1,0,0,1,146.1-146.1Z"></path>
                          <path class="avatar-1-cls-2"
                                d="M211.7,474.46a147.74,147.74,0,0,1-20.29,1.41c-81.14,0-147.5-66.37-147.5-147.5v-97c0-79.3,64.87-144.18,144.17-144.18h6.65a142.14,142.14,0,0,1,17,1C147.26,95.87,91.42,154.6,81.17,220.06a509,509,0,0,1-13.33,61.86L54.49,328.37C54.49,402.62,140.07,464.5,211.7,474.46Z"></path>
                          <path class="avatar-1-cls-3"
                                d="M191.41,481.93a152.43,152.43,0,0,1-152-152V234.88A151,151,0,0,1,190,84.28h2.79a151,151,0,0,1,150.61,150.6v95.05a152.45,152.45,0,0,1-152,152ZM190,93.28a142,142,0,0,0-141.6,141.6v95.05a142.82,142.82,0,0,0,244,101,142,142,0,0,0,42-101V234.88A142,142,0,0,0,192.8,93.28Z"></path>
                          <path class="avatar-1-cls-4"
                                d="M325.44,305.26v.19C324.89,305.48,325.11,305.35,325.44,305.26Z"></path>
                          <path class="avatar-1-cls-3"
                                d="M368.43,305.61a3,3,0,0,1-2.94-2.41c-4.06-20.3-24.53-16.89-25.4-16.73a3,3,0,1,1-1-5.91c9.36-1.67,28.17.66,32.33,21.46a3,3,0,0,1-2.35,3.53A3,3,0,0,1,368.43,305.61Z"></path>
                          <path class="avatar-1-cls-3"
                                d="M21.27,308.26a2.36,2.36,0,0,1-.37,0,3,3,0,0,1-2.61-3.34c1.75-14.23,7.79-21.26,12.55-24.65a20.94,20.94,0,0,1,10.61-4.05,3,3,0,0,1,.24,6c-.65,0-14.7,1.08-17.45,23.43A3,3,0,0,1,21.27,308.26Z"></path>
                          <ellipse class="avatar-1-cls-5" cx="184.64" cy="499.11" rx="179.73" ry="52.86"></ellipse>
                          <path class="avatar-1-cls-6"
                                d="M335.74,353.31c21.15,38.6,14.42,76.22,15.16,112.12l-11.45-12.67a123.72,123.72,0,0,1-30.05,60,44.13,44.13,0,0,0-13.92-15.33,92.89,92.89,0,0,1-28.69,48.92,37.34,37.34,0,0,0-1.06-30.87A58.87,58.87,0,0,1,233.6,551.2a24.22,24.22,0,0,0,2.63-23.34c-11.66,19.79-45.18,20.39-57.53,1-.86,3.91-.23,9.05,3.76,9.38-16.8,2.59-32.18-4.49-43.74-16.95a28.25,28.25,0,0,0,9.37,18.32A51.33,51.33,0,0,1,105.4,511.3c-21.68,1.35-43.33-13.51-49.87-34.21a10.36,10.36,0,0,1-2.7,9.92C15.38,468,17.38,382.75,41.91,354.63c0,0,51.63,8.28,83,32.06,8.53,6.48,8.78-2.64,21-7.72,16.48-6.83,45.87-11.63,62.57-11.7,24.41-.11,37.46,30.85,53.1,16.16C303,344.58,335.38,352.66,335.74,353.31Z"></path>
                          <path class="avatar-1-cls-7"
                                d="M352.35,461,340.9,448.3a123.83,123.83,0,0,1-30,60,44.26,44.26,0,0,0-13.92-15.34,92.89,92.89,0,0,1-28.69,48.92A37.38,37.38,0,0,0,267.18,511a58.84,58.84,0,0,1-32.13,35.77,24.22,24.22,0,0,0,2.63-23.33c-11.66,19.79-45.18,20.39-57.53,1-.87,3.91.11,18.31,4.11,18.65-16.8,2.58-32.53-13.76-44.09-26.22.67,7,2.41,19.59,7.68,24.23-17.9-.91-33.22-18.12-41-34.26-21.68,1.35-43.33-13.5-49.87-34.21a10.38,10.38,0,0,1-2.7,9.93C41.34,476,32.8,461.71,28.19,444.67,44.75,456.74,64.24,465,83.51,472.46c13.08,5,26.33,9.83,40.12,12.34,13.38,2.43,27.05,2.67,40.65,2.91,37.73.65,77,1,111.14-15.22,9.78-4.65,20.09-12.6,19.75-23.43-.39-12.38-13.93-19.44-25.48-23.87,24.6-3.65,44.78-22.73,56-44.92a136.88,136.88,0,0,0,9.89-26.39l3.31,2.58C349,391.91,351.61,425.08,352.35,461Z"></path>
                          <path class="avatar-1-cls-3"
                                d="M256.37,560.11l7.72-18.34a32.54,32.54,0,0,0,2.3-16.08,63.44,63.44,0,0,1-29.54,26.86l-15.22,6.65,9.78-13.42A19.55,19.55,0,0,0,235,535.31c-6.64,5.87-15.71,9.29-25.74,9.47a40.71,40.71,0,0,1-22-5.69c1.08,5.49,1.15,10.37-3.11,12.33l-1.88.87-1.88-.87c-13.79-6.36-24.61-12.92-33.69-20.51,1.54,6.3,3.28,8.56,4.17,9.34l9.71,8.53-12.91-.66c-19.13-1-35-18.9-43.5-35h-.05c-18.58,0-36.49-10.43-46.18-26.13l-.46.48-2.31,2.25-2.88-1.46C38,481,27.7,464.56,23.31,441.92c-6.43-33.13.88-73.25,16.66-91.33a4.5,4.5,0,0,1,6.78,5.91c-14.15,16.23-20.57,53-14.61,83.71,3.45,17.74,10.68,31,20.55,37.85a5.39,5.39,0,0,0-.06-2.56L61.27,473c5.89,18.64,25.78,32.29,45.3,31.07l3-.19,1.31,2.73c7.82,16.21,18.57,26.05,28.08,30.23A85.81,85.81,0,0,1,135.69,519l-1.27-13.24,9.05,9.75c9,9.69,19.89,17.53,34.83,25-.35-1.64-.78-3.38-1.09-4.62-1.3-5.17-2-8.22-1.46-10.69l2.33-10.64,5.86,9.18c4.85,7.6,14,12.09,24.49,12.09h.66c10.8-.2,20-5,24.71-13l4.51-7.66,3.5,8.16a28.32,28.32,0,0,1,2,14.83,54.25,54.25,0,0,0,19.1-26.84l3.33-10.56,5,9.89a41.62,41.62,0,0,1,4.38,18.57,88.24,88.24,0,0,0,16.95-35.57l1.43-6.48,5.49,3.73a48.58,48.58,0,0,1,11.95,11.55,120.21,120.21,0,0,0,25.08-53.29l1.69-8.89,10.47,11.59c2.16-37.59-3.37-68.28-17.17-95.91a4.5,4.5,0,1,1,8-4c15.83,31.7,21.33,67,17.31,111.15l-.93,10.24-12.53-13.87A127.42,127.42,0,0,1,314.17,513l-4.26,4.66-3-5.54a39.46,39.46,0,0,0-7.37-9.62,97.41,97.41,0,0,1-28.29,44.41Z"></path>
                          <path class="avatar-1-cls-1"
                                d="M158.08,455.14A10.16,10.16,0,0,1,147.94,445V406.25a10.17,10.17,0,0,1,10.14-10.14H229a10.17,10.17,0,0,1,10.13,10.14V445A10.16,10.16,0,0,1,229,455.14"></path>
                          <path class="avatar-1-cls-2"
                                d="M240.85,410.47v12a10.15,10.15,0,0,0-9.29-6.1H160.61a10.16,10.16,0,0,0-10.14,10.13v26.74a10.1,10.1,0,0,1-.84-4V410.47a10.16,10.16,0,0,1,10.13-10.13h71A10.16,10.16,0,0,1,240.85,410.47Z"></path>
                          <path class="avatar-1-cls-3"
                                d="M193.13,394.93c7.32,0,14.47,0,21.37.11l10.16.12,2.48,0,1.23,0h.34l.45,0,.89.06a14.83,14.83,0,0,1,6.56,2.4,14.65,14.65,0,0,1,6.5,11.19l0,.81v.68l0,1.11-.06,2.21c0,1.45-.08,2.89-.13,4.3-.18,5.64-.38,10.9-.61,15.69s-.48,9.14-.75,12.95c0,.48-.06,1-.1,1.41,0,.23,0,.45,0,.68s-.05.55-.08.81a12.38,12.38,0,0,1-.77,3.09,12,12,0,0,1-3.1,4.43,10.12,10.12,0,0,1-6.49,2.68,5.06,5.06,0,0,1-1.78-.27c-.39-.15-.58-.31-.58-.49s.19-.35.52-.54l1.41-.68a10.84,10.84,0,0,0,4.06-3.37,8.74,8.74,0,0,0,1.39-3.21,8.13,8.13,0,0,0,.13-1.92l0-.53c0-.23,0-.45-.05-.68,0-.46-.07-.93-.1-1.41-.27-3.81-.52-8.15-.74-12.95s-.44-10.05-.62-15.69c0-1.41-.09-2.85-.13-4.3l-.06-2.21,0-1.11v-.28l0-.16,0-.32a5.68,5.68,0,0,0-2.72-4.14,5.59,5.59,0,0,0-2.44-.77h-.76l-1.23,0-2.48,0-10.16.12c-6.9.07-14.05.1-21.37.1s-14.47,0-21.37-.1l-10.17-.12-2.47,0-1.23,0h-.76a5.59,5.59,0,0,0-2.44.77,5.68,5.68,0,0,0-2.72,4.14l0,.32,0,.16v.28l0,1.11-.06,2.21c0,1.45-.09,2.89-.13,4.3-.18,5.64-.39,10.9-.62,15.69s-.47,9.14-.74,12.95c0,.48-.07,1-.1,1.41,0,.23,0,.45,0,.68l0,.53a8.13,8.13,0,0,0,.13,1.92,8.58,8.58,0,0,0,1.39,3.21,10.69,10.69,0,0,0,4.06,3.37l1.4.68c.34.19.52.37.52.54s-.18.34-.57.49a5.06,5.06,0,0,1-1.78.27,10.14,10.14,0,0,1-6.5-2.68,12,12,0,0,1-3.09-4.43,12.38,12.38,0,0,1-.77-3.09c0-.26-.07-.59-.08-.81l-.06-.68c0-.46-.06-.93-.1-1.41-.26-3.81-.51-8.15-.74-12.95s-.43-10.05-.61-15.69c0-1.41-.09-2.85-.13-4.3,0-.73-.05-1.47-.07-2.21l0-1.11v-.68l0-.81a14.74,14.74,0,0,1,13.06-13.59l.89-.06.45,0h.34l1.23,0,2.47,0,10.17-.12C178.66,395,185.81,394.93,193.13,394.93Z"></path>
                          <path class="avatar-1-cls-3"
                                d="M54.48,374.11a37.83,37.83,0,0,0,.49,9.41,39.45,39.45,0,0,0,3,9.29,40.75,40.75,0,0,1-5.73-8.37,42.54,42.54,0,0,1-3.46-9.9,46.05,46.05,0,0,1-1-10.71,50.72,50.72,0,0,1,.42-5.48,35.47,35.47,0,0,1,1.17-5.68l10.41,4.56a24.21,24.21,0,0,0-2,3.68,43.89,43.89,0,0,0-1.6,4.2A39.74,39.74,0,0,0,54.48,374.11Z"></path>
                          <path class="avatar-1-cls-3"
                                d="M70,382.66c.81,7.4,4.1,14.79,8.86,21.21A47.32,47.32,0,0,1,64.51,384a38.71,38.71,0,0,1-2.31-12.94,35.09,35.09,0,0,1,2.63-13.62l10,5.38C71,367.93,69.21,375.33,70,382.66Z"></path>
                          <path class="avatar-1-cls-3"
                                d="M98.32,388.23a51,51,0,0,0,6.84,20.32,54,54,0,0,1-12.35-18.93A56.65,56.65,0,0,1,89,366.14l11.2,1.92A47.79,47.79,0,0,0,98.32,388.23Z"></path>
                          <path class="avatar-1-cls-3"
                                d="M282.66,384.17a26.93,26.93,0,0,1-.31,8.78c-.5,2.23-1.26,3.53-2,3.48-1.43-.15-2-5.39-2.82-11.65s-1.36-11.51,0-12c.66-.21,1.71.88,2.72,2.92A27,27,0,0,1,282.66,384.17Z"></path>
                          <path class="avatar-1-cls-3"
                                d="M305.19,378.25a35.36,35.36,0,0,1-2.39,12.16c-1.21,3-2.49,4.54-3.14,4.31-1.37-.52.25-7.73.42-16.61s-.95-16.16.45-16.6c.65-.19,1.85,1.45,2.91,4.47A35.62,35.62,0,0,1,305.19,378.25Z"></path>
                          <path class="avatar-1-cls-3"
                                d="M328.91,374.58a53,53,0,0,1,.5,9.22,44.45,44.45,0,0,1-.88,7.48c-.89,4.19-2.12,6.59-2.77,6.45-1.47-.31-.09-10.37-1.91-22.42s-5.7-21.42-4.36-22.11c.6-.31,2.41,1.68,4.41,5.46a46.7,46.7,0,0,1,2.91,6.93A56.29,56.29,0,0,1,328.91,374.58Z"></path>
                          <path class="avatar-1-cls-3"
                                d="M63.25,476.89a41,41,0,0,1-.26-8.64,36.07,36.07,0,0,1,.52-3.73,28.41,28.41,0,0,1,.79-3.18c1.19-3.83,2.68-5.88,3.3-5.66s.47,2.63.25,6.31c0,.93-.12,1.93-.13,3s0,2.22,0,3.41a68.87,68.87,0,0,0,.61,7.76,75.5,75.5,0,0,0,1.58,7.62c.34,1.15.63,2.26,1,3.27s.66,2,1,2.85c1.24,3.47,2.14,5.7,1.53,6.13s-2.54-1.16-4.76-4.51A27.16,27.16,0,0,1,67,488.7a35.74,35.74,0,0,1-1.55-3.44A41.24,41.24,0,0,1,63.25,476.89Z"></path>
                          <path class="avatar-1-cls-3"
                                d="M95.32,490.74a52.94,52.94,0,0,1-.06-13.92c.47-3.51,1.17-5.64,1.87-5.63s1.28,2.19,1.74,5.63.8,8.16,1.51,13.2c.37,2.51.82,4.86,1.3,7,.29,1,.5,2.06.8,3q.19.7.39,1.35l.41,1.23c1,3.14,1.89,5.16,1.29,5.61s-2.46-.92-4.52-4l-.78-1.23c-.25-.43-.48-.9-.73-1.39a31.63,31.63,0,0,1-1.37-3.18A41.46,41.46,0,0,1,95.32,490.74Z"></path>
                          <path class="avatar-1-cls-3"
                                d="M133.57,497.43c-4.22-15-4.79-27.65-3.43-27.82s4.23,11.85,8.35,26.45,7.93,26.36,6.6,26.93S137.74,512.42,133.57,497.43Z"></path>
                          <path class="avatar-1-cls-3"
                                d="M246.46,509.58c1.89-6.31,3.22-12.24,4.4-16.52s2.17-6.94,2.88-6.83.94,2.91.68,7.41a78.07,78.07,0,0,1-3.07,17.43,59.78,59.78,0,0,1-3.67,9.2,42.39,42.39,0,0,1-2.2,3.76c-.37.57-.73,1.13-1.1,1.64l-1.13,1.43c-3,3.61-5.46,5.14-5.93,4.69s.94-2.87,2.92-6.68c.25-.47.5-1,.77-1.49l.78-1.65c.56-1.12,1-2.39,1.62-3.67C244.45,515.67,245.5,512.73,246.46,509.58Z"></path>
                          <path class="avatar-1-cls-3"
                                d="M276.25,498.2c1.34-7.68,2-14.9,3-20.1s1.81-8.37,2.51-8.31,1.07,3.35,1.08,8.62a122.32,122.32,0,0,1-1.55,20.69,60.77,60.77,0,0,1-3.08,11.26,42.45,42.45,0,0,1-4.42,8.53c-3.14,4.54-6,6.46-6.51,6s1.27-3.2,3.37-7.8a68.85,68.85,0,0,0,3.11-8.29A89.28,89.28,0,0,0,276.25,498.2Z"></path>
                          <path class="avatar-1-cls-3"
                                d="M306.39,479c1.49-6.22,2.52-12,3.48-16.23s1.83-6.81,2.54-6.73,1.08,2.78,1,7.15a78.88,78.88,0,0,1-2.11,17,58.26,58.26,0,0,1-3,9.11c-.63,1.35-1.19,2.63-1.87,3.77-.33.58-.63,1.14-1,1.66l-1,1.47c-2.59,3.69-4.87,5.39-5.38,5s.61-2.87,2.22-6.72L302,493c.2-.53.41-1.08.62-1.66.47-1.12.85-2.38,1.32-3.67C304.79,485,305.63,482.1,306.39,479Z"></path>
                          <path class="avatar-1-cls-3"
                                d="M316.6,469.6c1.61-4,2.93-7.79,4-11.33.5-1.78,1-3.46,1.41-5.07s.78-3.1,1.1-4.47c1.26-5.5,1.93-9,2.68-9s1.27,3.64.89,9.52c-.1,1.46-.24,3.07-.52,4.78s-.61,3.53-1,5.44a76.28,76.28,0,0,1-9.69,23.34c-1.07,1.63-2.07,3.19-3.13,4.56s-2.05,2.64-3,3.74c-3.89,4.42-6.89,6.55-7.37,6.09s1.47-3.46,4.47-8.24c.75-1.2,1.57-2.5,2.39-3.94s1.69-3,2.6-4.58C313.16,477.18,315,473.53,316.6,469.6Z"></path>
                          <path class="avatar-1-cls-8"
                                d="M36.38,392.54c.75-3.65,2.73-6.2,4.07-5.78s1.62,3.43.93,6.81-2.14,6-3.55,5.89S35.63,396.18,36.38,392.54Z"></path>
                          <path class="avatar-1-cls-8"
                                d="M37.64,432a53,53,0,0,1-1.88-14.87c.13-3.85.79-6.2,1.47-6.2,1.47,0,2.42,9.08,5.35,19.74s6.63,19,5.37,19.72c-.59.34-2.36-1.34-4.42-4.6A51.58,51.58,0,0,1,37.64,432Z"></path>
                          <path class="avatar-1-cls-3"
                                d="M125.55,391.49h-.49c-5.14-.18-9.18-3.25-12.42-5.71l-.2-.15a157,157,0,0,0-68.06-29.49,4.5,4.5,0,0,1,1.51-8.87,166.07,166.07,0,0,1,72,31.19l.19.15c2.47,1.87,5,3.8,7.31,3.89s4.86-1.61,7.58-3.4l.77-.5C149.09,368.55,169,363,189.86,363h0c20.83,0,40.77,5.52,56.13,15.56l.77.5c2.71,1.79,5.3,3.48,7.58,3.4s4.84-2,7.3-3.89l.2-.15a166.07,166.07,0,0,1,72-31.19,4.5,4.5,0,1,1,1.51,8.87,157,157,0,0,0-68.06,29.49l-.2.15c-3.24,2.46-7.28,5.53-12.42,5.71s-9.43-2.62-12.85-4.87l-.74-.49c-28.72-18.76-73.71-18.76-102.43,0l-.74.49C134.6,388.79,130.5,391.49,125.55,391.49Z"></path>
                          <path class="avatar-1-cls-3"
                                d="M190.39,345.16a4.49,4.49,0,0,1-4.5-4.5V294.07a4.5,4.5,0,0,1,9,0v46.59A4.5,4.5,0,0,1,190.39,345.16Z"></path>
                          <path class="avatar-1-cls-2"
                                d="M178.07,222.19c1.68,7.42,1.09,17.32-4.12,23.31-6.08,7-15.65,5.56-23.92,5.21a103.64,103.64,0,0,0-30,3.07c-8,2.05-15.14,7-23.27,8.36-8.9,1.55-11-3.2-5.06-9.72,7-7.66,17-15.82,26.45-20.25,17.56-8.26,39.91-12.29,59.6-10.32"></path>
                          <path class="avatar-1-cls-2"
                                d="M204.25,225.47c-1.68,7.42-1.08,17.32,4.13,23.31,6.07,7,15.65,5.56,23.92,5.21a103.61,103.61,0,0,1,30,3.07c8,2.05,15.14,6.95,23.27,8.36,8.91,1.55,11-3.19,5.06-9.72-6.94-7.66-17-15.81-26.44-20.25-17.57-8.26-39.91-12.29-59.61-10.31"></path>
                          <path class="avatar-1-cls-6"
                                d="M205.19,214.55c-1.68,7.41-1.09,17.31,4.12,23.3,6.07,7,15.65,5.57,23.92,5.22a103.23,103.23,0,0,1,30,3.07c8,2.05,15.15,6.94,23.27,8.36,8.91,1.55,11-3.2,5.07-9.73-6.95-7.66-17-15.81-26.45-20.25-17.57-8.26-39.91-12.28-59.6-10.31"></path>
                          <path class="avatar-1-cls-3"
                                d="M289.6,259.29a22.42,22.42,0,0,1-3.85-.36c-5-.87-9.51-2.84-13.86-4.75a64.83,64.83,0,0,0-9.76-3.68,98.35,98.35,0,0,0-28.71-2.93c-.88,0-1.78.08-2.68.13-8,.44-18,1-24.83-6.89-6.61-7.6-6.88-19.43-5.11-27.26a5.34,5.34,0,0,1,4.29-3.82,123.23,123.23,0,0,1,62,10.72c9.2,4.33,19.88,12.49,27.87,21.3,5.87,6.47,4.76,11.05,3.58,13.2C297.53,256.7,295.17,259.29,289.6,259.29Zm-51.81-20.82a106.54,106.54,0,0,1,26.58,3.31,73,73,0,0,1,11.13,4.16c4,1.77,7.86,3.44,11.79,4.12a12.72,12.72,0,0,0,2.79.22,12.53,12.53,0,0,0-1.83-2.48c-7.24-8-16.83-15.35-25-19.2a114.19,114.19,0,0,0-54.15-10.17c-.7,5.74.13,12.44,3.63,16.47,4,4.56,10.57,4.2,17.55,3.82l2.79-.15C234.63,238.51,236.21,238.47,237.79,238.47Z"></path>
                          <path class="avatar-1-cls-6"
                                d="M173.31,210.57c1.68,7.42,1.09,17.32-4.12,23.3-6.08,7-15.66,5.57-23.93,5.22a103.27,103.27,0,0,0-30,3.07c-8,2.05-15.14,7-23.27,8.36-8.91,1.55-11-3.2-5.06-9.72,6.94-7.66,17-15.82,26.45-20.25,17.56-8.26,39.9-12.29,59.6-10.32"></path>
                          <path class="avatar-1-cls-3"
                                d="M88.89,255.31c-5.56,0-7.93-2.59-8.89-4.34-1.19-2.15-2.3-6.72,3.58-13.2,8-8.81,18.66-17,27.86-21.29a123,123,0,0,1,62-10.72,5.3,5.3,0,0,1,4.29,3.82c1.77,7.82,1.49,19.65-5.12,27.25-6.86,7.88-16.82,7.33-24.83,6.89l-2.68-.13a98.35,98.35,0,0,0-28.71,2.93,66.24,66.24,0,0,0-9.75,3.68c-4.36,1.91-8.86,3.88-13.87,4.75A22.42,22.42,0,0,1,88.89,255.31Zm-.47-9a12.45,12.45,0,0,0,2.78-.21c3.93-.69,7.75-2.36,11.8-4.13a73.52,73.52,0,0,1,11.12-4.16,107.61,107.61,0,0,1,31.33-3.2c.92,0,1.85.09,2.8.14,7,.38,13.57.75,17.54-3.82,3.51-4,4.33-10.72,3.63-16.47a114.34,114.34,0,0,0-54.15,10.17c-8.19,3.85-17.78,11.21-25,19.2A12.55,12.55,0,0,0,88.42,246.3Z"></path>
                          <path class="avatar-1-cls-3"
                                d="M183.32,443.66a115.94,115.94,0,0,1-19.23-1.61,3.5,3.5,0,1,1,1.27-6.88c.3.05,30.64,5.45,44.81-4.67a15.44,15.44,0,0,0,6.65-10.76,3.5,3.5,0,1,1,6.92,1.05,22.47,22.47,0,0,1-9.51,15.42C205.9,442.15,193.63,443.66,183.32,443.66Z"></path>
                          <path class="avatar-1-cls-3"
                                d="M353.48,315.47a3,3,0,0,1-2.91-2.3,38.7,38.7,0,0,1-1.16-13.9A21,21,0,0,1,355.94,286a3,3,0,0,1,4,4.48,15.11,15.11,0,0,0-4.57,9.53,33.19,33.19,0,0,0,1,11.77,3,3,0,0,1-2.22,3.61A2.79,2.79,0,0,1,353.48,315.47Z"></path>
                          <path class="avatar-1-cls-3"
                                d="M33.65,315.47a2.79,2.79,0,0,1-.7-.08,3,3,0,0,1-2.23-3.61,33.19,33.19,0,0,0,1-11.77,15.1,15.1,0,0,0-4.56-9.53,3,3,0,1,1,4-4.48,21,21,0,0,1,6.53,13.27,38.93,38.93,0,0,1-1.16,13.9A3,3,0,0,1,33.65,315.47Z"></path>
                          <path class="avatar-1-cls-8"
                                d="M257.31,169.69a45.27,45.27,0,0,1,7.68,4,35.23,35.23,0,0,1,5.5,4.42c2.85,2.87,4,5.23,3.3,6s-3.05,0-6.42-1.57l-5.81-2.68c-2.18-1-4.56-2-7.09-3s-5-1.88-7.24-2.68l-6.07-2c-3.49-1.2-5.77-2.2-5.73-3.28s2.48-2,6.52-2.08a34.71,34.71,0,0,1,7,.58A45.21,45.21,0,0,1,257.31,169.69Z"></path>
                          <path class="avatar-1-cls-8"
                                d="M37.56,196.45a14.27,14.27,0,0,1,4.18-5.72c1.52-1.16,2.92-1.47,3.78-.87s1.07,2,.85,3.68a23.93,23.93,0,0,1-1.76,5.89,23.77,23.77,0,0,1-3,5.37c-1.06,1.34-2.18,2.15-3.23,1.95s-1.79-1.42-2-3.31A14.32,14.32,0,0,1,37.56,196.45Z"></path>
                          <path class="avatar-1-cls-8"
                                d="M59.41,173.58c3.26-1.52,6.63-1.21,7.53.71s-1,4.71-4.29,6.23-6.63,1.2-7.53-.71S56.15,175.1,59.41,173.58Z"></path>
                          <path class="avatar-1-cls-8"
                                d="M74.62,157.15c2.37-5.05,5.43-8.82,7.45-8.15s2.07,5.88-.51,11.39-6.65,8.81-8.43,7.7S72.26,162.2,74.62,157.15Z"></path>
                          <path class="avatar-1-cls-9"
                                d="M57.89,159.15V82c0-15.57,6.93-29.64,17.59-35.75l38.7-22.17c46.33-26.53,98.7-26.53,145,0l38.71,22.17C308.57,52.33,315.49,66.4,315.49,82v77.18"></path>
                          <path class="avatar-1-avatar-1-cls-10"
                                d="M312.46,80.79v19.39c-49.22-48.34-115.1-74.62-177.69-59.93-17.18,4-34.87,11.84-45.35,28.33-13.07,20.57-10.54,52.57,5.53,70C106.58,151.12,122,155,137.89,158h-83V80.79c0-15.58,6.92-29.65,17.59-35.76l38.7-22.17c46.32-26.52,98.7-26.52,145,0L294.88,45C305.55,51.14,312.46,65.21,312.46,80.79Z"></path>
                          <path class="avatar-1-cls-3"
                                d="M315.3,163.91a4.5,4.5,0,0,1-4.5-4.5V82.23c0-14-6-26.52-15.32-31.85L256.77,28.22c-22.36-12.81-46-19.31-70.27-19.31s-47.91,6.5-70.27,19.31L77.52,50.38C68.22,55.71,62.2,68.22,62.2,82.23v77.18a4.5,4.5,0,0,1-9,0V82.23c0-17.18,7.79-32.75,19.85-39.66l38.7-22.16c47.51-27.21,102-27.21,149.5,0L300,42.57C312,49.48,319.8,65.05,319.8,82.23v77.18A4.49,4.49,0,0,1,315.3,163.91Z"></path>
                          <path class="avatar-1-avatar-1-cls-11"
                                d="M358.91,168a188.7,188.7,0,0,1-7.86,25.11c-1.65,4.39-15.77,41.8-14.06,43.41-34-31.93-86.3-52.37-145-52.37S81.13,204.56,47.14,236.44c-12.27-38.2-42.51-96.29-6.57-129,10.27-9.35,23.35-13.28,36.1-16.5,72.69-18.36,148.62-20.81,221.57-3.88,12,2.79,24,6.15,34.87,12.74s20.46,16.78,25,30C362.43,142.3,361.73,155.35,358.91,168Z"></path>
                          <path class="avatar-1-avatar-1-cls-12"
                                d="M61.88,102.48C69,96,77.49,92.12,86.27,89.28q-4.09,1-8.18,2c-12.75,3.22-25.83,7.15-36.1,16.5-35.94,32.71-5.7,90.8,6.57,129a163.52,163.52,0,0,1,17-13.88C52.14,185,28.54,132.83,61.88,102.48Z"></path>
                          <path class="avatar-1-avatar-1-cls-13"
                                d="M104.58,105a1,1,0,0,1-.19-2c6.25-1.26,12.88-2.39,19.71-3.36a1,1,0,0,1,.28,2c-6.79,1-13.39,2.09-19.6,3.34A.68.68,0,0,1,104.58,105Z"></path>
                          <path class="avatar-1-avatar-1-cls-13"
                                d="M57.19,120.46a1,1,0,0,1-.84-.46,1,1,0,0,1,.3-1.38c.42-.27,10.63-6.73,35.7-12.92a1,1,0,1,1,.48,1.94c-24.75,6.11-35,12.6-35.1,12.66A1,1,0,0,1,57.19,120.46Z"></path>
                          <path class="avatar-1-avatar-1-cls-13"
                                d="M220.93,96.32h-.09c-6.83-.61-13.48-1-19.79-1.22a1,1,0,0,1,0-2h0c6.34.2,13,.62,19.9,1.23a1,1,0,0,1-.09,2Z"></path>
                          <path class="avatar-1-avatar-1-cls-13"
                                d="M152,99.31a1,1,0,0,1-.16-2l5.35-.91c10.3-1.78,21-3.62,31.71-3.45a1,1,0,1,1,0,2c-10.58-.16-21.13,1.66-31.34,3.42l-5.37.91Z"></path>
                          <path class="avatar-1-avatar-1-cls-13"
                                d="M326.33,116.8a1,1,0,0,1-.33-.06c-6.55-2.35-13-4.47-19.07-6.29a1,1,0,0,1-.67-1.25,1,1,0,0,1,1.25-.67c6.13,1.83,12.58,4,19.16,6.33a1,1,0,0,1-.34,1.94Z"></path>
                          <path class="avatar-1-avatar-1-cls-13"
                                d="M295.34,107.21a1,1,0,0,1-.24,0C270.44,101,258.75,102,258.64,102a1,1,0,1,1-.19-2c.48,0,12.09-1.07,37.13,5.24a1,1,0,0,1-.24,2Z"></path>
                          <path class="avatar-1-avatar-1-cls-13"
                                d="M105.15,117.87a1,1,0,0,1-.19-2c6.24-1.26,12.88-2.39,19.71-3.36a1,1,0,1,1,.28,2c-6.79,1-13.39,2.09-19.6,3.34A.68.68,0,0,1,105.15,117.87Z"></path>
                          <path class="avatar-1-avatar-1-cls-13"
                                d="M57.76,133.34a1,1,0,0,1-.54-1.84c.42-.27,10.63-6.73,35.7-12.92a1,1,0,0,1,.48,1.94c-24.69,6.1-35,12.6-35.1,12.66A1,1,0,0,1,57.76,133.34Z"></path>
                          <path class="avatar-1-avatar-1-cls-13"
                                d="M221.5,109.2h-.09c-6.83-.61-13.49-1-19.79-1.22a1,1,0,0,1-1-1,1,1,0,0,1,1-1c6.33.2,13,.62,19.89,1.23a1,1,0,0,1-.08,2Z"></path>
                          <path class="avatar-1-avatar-1-cls-13"
                                d="M152.57,112.24a1,1,0,0,1-.35-1.94c.46-.17,11.58-4.16,37.21-4.46a1,1,0,0,1,1,1,1,1,0,0,1-1,1c-25.23.3-36.44,4.3-36.55,4.34A1,1,0,0,1,152.57,112.24Z"></path>
                          <path class="avatar-1-avatar-1-cls-13"
                                d="M326.9,129.68a1,1,0,0,1-.34-.06c-6.54-2.35-12.95-4.47-19.06-6.29a1,1,0,0,1,.58-1.92c6.13,1.83,12.58,4,19.16,6.33a1,1,0,0,1-.34,1.94Z"></path>
                          <path class="avatar-1-avatar-1-cls-13"
                                d="M295.91,120.09a1,1,0,0,1-.24,0c-24.72-6.23-36.35-5.2-36.46-5.19a1,1,0,0,1-.2-2c.49,0,12.09-1.07,37.14,5.24a1,1,0,0,1-.24,2Z"></path>
                          <path class="avatar-1-avatar-1-cls-13"
                                d="M104,132.4a1,1,0,0,1-1-.8,1,1,0,0,1,.78-1.18c6.25-1.25,12.88-2.39,19.71-3.36a1,1,0,0,1,1.14.85,1,1,0,0,1-.85,1.13c-6.8,1-13.4,2.09-19.61,3.34A.65.65,0,0,1,104,132.4Z"></path>
                          <path class="avatar-1-avatar-1-cls-13"
                                d="M56.62,147.87a1,1,0,0,1-.84-.46,1,1,0,0,1,.3-1.38c.42-.27,10.64-6.73,35.71-12.92a1,1,0,0,1,1.21.73,1,1,0,0,1-.74,1.21c-24.74,6.11-35,12.6-35.1,12.66A1,1,0,0,1,56.62,147.87Z"></path>
                          <path class="avatar-1-avatar-1-cls-13"
                                d="M220.36,123.73h-.09c-6.83-.62-13.48-1-19.78-1.23a1,1,0,0,1-1-1,1,1,0,0,1,1-1c6.34.2,13,.62,19.9,1.23a1,1,0,0,1-.09,2Z"></path>
                          <path class="avatar-1-avatar-1-cls-13"
                                d="M151.43,126.77a1,1,0,0,1-.35-1.94c.47-.17,11.58-4.16,37.22-4.46h0a1,1,0,0,1,0,2c-25.29.3-36.43,4.3-36.54,4.34A1.07,1.07,0,0,1,151.43,126.77Z"></path>
                          <path class="avatar-1-avatar-1-cls-13"
                                d="M325.77,144.22a1,1,0,0,1-.34-.06c-6.54-2.36-12.95-4.48-19.06-6.3a1,1,0,0,1-.67-1.25,1,1,0,0,1,1.24-.67c6.14,1.84,12.59,4,19.16,6.33a1,1,0,0,1-.33,1.95Z"></path>
                          <path class="avatar-1-avatar-1-cls-13"
                                d="M294.77,134.62l-.24,0c-24.65-6.21-36.35-5.2-36.46-5.19a1,1,0,0,1-.19-2c.48,0,12.08-1.07,37.14,5.24a1,1,0,0,1-.25,2Z"></path>
                          <path class="avatar-1-cls-8"
                                d="M134.28,55.94a21.68,21.68,0,0,1,9.13,1c2.27.86,3.52,2,3.38,3s-1.6,1.81-3.74,2.36a52.83,52.83,0,0,1-8.1,1.2,52.47,52.47,0,0,1-8.19.23c-2.2-.16-3.76-.65-4.09-1.66s.7-2.36,2.79-3.59A21.52,21.52,0,0,1,134.28,55.94Z"></path>
                          <path class="avatar-1-cls-8"
                                d="M189.16,54c14.08.87,25.23,3.94,25,6s-11.61,2.48-25.44,1.63S163.63,59,163.64,56.91,175.09,53.15,189.16,54Z"></path>
                          <path class="avatar-1-cls-3"
                                d="M45,244.59l-2.18-6.77c-1.91-6-4.28-12.43-6.78-19.29-13.82-37.8-31-84.85,1.47-114.42C48.67,94,62.43,89.89,75.57,86.57c75.35-19,152.7-20.37,223.69-3.89C311.33,85.48,324.07,89,335.45,96c12.88,7.83,22.44,19.32,26.92,32.35,4.08,11.86,4.39,25.17.93,40.67h0a191.33,191.33,0,0,1-8,25.71l-.14.4c-10,26.58-13.67,38.62-13.77,40.85a3.89,3.89,0,0,0-1.28-2.7l-6.16,6.56C299.3,207.29,247.58,188.65,192,188.65S84.83,207.26,50.21,239.73ZM197.37,80.24A489.6,489.6,0,0,0,77.77,95.3c-12,3-24.58,6.73-34.17,15.47-28,25.5-12,69.4.92,104.68,1.65,4.52,3.25,8.88,4.7,13.07,36.12-31.14,87.71-48.87,142.8-48.87,54.72,0,106,17.49,142,48.22,1-3.25,2.37-7.53,4.18-12.73,2.27-6.56,5.11-14.37,8.44-23.22l.15-.39A184.81,184.81,0,0,0,354.52,167c3.08-13.83,2.87-25.54-.66-35.78-3.8-11.05-12-20.85-23.09-27.6-9.72-5.91-20.44-9.15-33.54-12.19A441.79,441.79,0,0,0,197.37,80.24ZM358.91,168h0Z"></path>
                          <path class="avatar-1-cls-8"
                                d="M316.3,283a85,85,0,0,1-.17-10.5c.2-2.77.72-4.63,1.76-4.88s2.37,1.22,3.57,3.91a35.67,35.67,0,0,1,1.44,22.17c-.84,2.82-2,4.45-3,4.34s-1.82-1.89-2.38-4.61A83.3,83.3,0,0,1,316.3,283Z"></path>
                          <path class="avatar-1-cls-8"
                                d="M310.41,253a8.45,8.45,0,0,1-.74-3.45,4,4,0,0,1,1-2.95,2.9,2.9,0,0,1,3.26-.34,7.5,7.5,0,0,1,3.8,8.75,2.92,2.92,0,0,1-2.48,2.15,4.08,4.08,0,0,1-2.87-1.26A8.5,8.5,0,0,1,310.41,253Z"></path>
                          <path class="avatar-1-cls-8"
                                d="M300.23,237.15c-1-1.27-.45-3.35,1.22-4.65s3.82-1.33,4.82-.06.44,3.36-1.23,4.66S301.22,238.42,300.23,237.15Z"></path>
                          <path class="avatar-1-cls-8"
                                d="M258.7,168A36.44,36.44,0,0,1,271.61,173c3,2,4.41,3.89,3.92,4.8s-2.75.81-6,.2-7.55-1.61-12.31-2.55-9.11-1.61-12.36-2.27-5.37-1.37-5.47-2.44,1.91-2.24,5.43-3A36.43,36.43,0,0,1,258.7,168Z"></path>
                          <path class="avatar-1-cls-8"
                                d="M296.63,182.34a5.05,5.05,0,0,1,2.82,2.8,3,3,0,0,1-.45,3,4.48,4.48,0,0,1-2.58,1.46,4.48,4.48,0,0,1-4.87-2,4.37,4.37,0,0,1-.75-2.87,3,3,0,0,1,1.85-2.44A5.05,5.05,0,0,1,296.63,182.34Z"></path>
                          <path class="avatar-1-cls-8"
                                d="M320.06,194.45a16.53,16.53,0,0,1,5.18,5.14c1,1.69,1.19,3.15.49,3.94s-2.13.8-3.88.28a28.09,28.09,0,0,1-11.07-7.19c-1.19-1.39-1.77-2.7-1.32-3.67s1.85-1.37,3.8-1.15A16.57,16.57,0,0,1,320.06,194.45Z"></path>
                          <circle class="avatar-1-cls-3" cx="133.38" cy="300.14" r="22.91"></circle>
                          <circle class="avatar-1-cls-1" cx="143.6" cy="283.11" r="12.7"></circle>
                          <circle class="avatar-1-cls-8" cx="124.18" cy="308.69" r="5.28"></circle>
                          <circle class="avatar-1-cls-3" cx="239.38" cy="305.14" r="22.91"></circle>
                          <circle class="avatar-1-cls-1" cx="249.6" cy="288.11" r="12.7"></circle>
                          <circle class="avatar-1-cls-8" cx="230.18" cy="313.69" r="5.28"></circle>
                        </g>
                      </g>
                    </svg>
                  </div>
                  <div min-w-0 flex-auto>
                    <p text-sm font-semibold leading-6>杰克</p>
                    <p mt-1 truncate text-xs leading-5>在<a href="#" decoration-none text-blue>&nbsp;开源组&nbsp;</a>创建了<a
                        href="#" decoration-none
                        text-blue>&nbsp;Vue&nbsp;</a>项目</p>
                  </div>
                  <div hidden h-full shrink-0 sm:flex sm:flex-col sm:items-end>
                    <span mt-6 text-xs leading-6>刚刚</span>
                  </div>
                </li>
                <el-divider/>
              </ul>
            </div>
          </el-card>
        </div>

      </div>
      <!--right-->
      <div w-full class="lg:w-2/5">
        <!-- 快捷导航 -->
        <el-card shadow="never">
          <template #header>
            <h3 font-semibold tracking-tight text-lg>快捷导航</h3>
          </template>
          <template #default>
            <div flex flex-wrap p-0>
              <div v-for="(item, index) in 6" :key="index" class="w-1/3" flex justify-center items-center flex-col
                   border-b-0 cursor-pointer border-b border-r border-t
                   py-8 hover:shadow-md>
                <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true"
                     role="img" class="size-7 transition-all duration-300 group-hover:scale-125 iconify iconify--ion"
                     width="1em" height="1em" viewBox="0 0 512 512" style="color: rgb(31, 218, 202);">
                  <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                        stroke-width="32"
                        d="M80 212v236a16 16 0 0 0 16 16h96V328a24 24 0 0 1 24-24h80a24 24 0 0 1 24 24v136h96a16 16 0 0 0 16-16V212"></path>
                  <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                        stroke-width="32"
                        d="M480 256L266.89 52c-5-5.28-16.69-5.34-21.78 0L32 256m368-77V64h-48v69"></path>
                </svg>
                <span class="text-md mt-2 truncate">首页</span>
              </div>
            </div>
          </template>
        </el-card>
        <!-- 待办事项 -->
        <div mt-5>
          <el-card shadow="never" relative>
            <template #header>
              <h3 font-semibold tracking-tight text-lg>
                <span>
                  待办事项
                </span>
                <el-button type="primary" @click="addTodo" absolute right-5>添加</el-button>
              </h3>
            </template>
            <div flex flex-wrap p-5 pt-0>
              <ul w-full role="list">
                <VueDraggable v-model="todos">
                  <li v-for="todo in todos" :key="todo.id" flex justify-between gap-x-6 py-5 cursor-grab
                      :class="{'delete': todo.completed}">
                    <div flex min-w-0 items-center gap-x-5>
                      <div flex items-center>
                        <el-checkbox v-model="todo.completed"/>
                      </div>
                      <div min-w-0 flex-auto>
                        <p text-sm font-semibold leading-6>{{ todo.type }}</p>
                        <p mt-1 truncate text-xs leading-5>{{ todo.text }}</p>
                      </div>
                    </div>
                    <div hidden h-full shrink-0 class="sm:flex sm:flex-col sm:items-end">
                      <span mt-6 text-xs leading-6>2024-07-30 11:00:00</span>
                    </div>
                  </li>
                </VueDraggable>
              </ul>
            </div>
          </el-card>
        </div>
        <!-- 访问来源 -->
        <div mt-5>
          <el-card shadow="never">
            <template #header>
              <h3 font-semibold tracking-tight text-lg>
                访问来源
              </h3>
            </template>
            <div p-6 pt-0>
              <DonutChart/>
            </div>
          </el-card>
        </div>
      </div>
    </div>
    <!--添加待办弹窗-->
    <FormDialog ref="todoDialogRef" title="添加待办事项" destroy-on-close @submit="handleSubmit(addTodoRef)">
      <el-form ref="addTodoRef" :model="addTodoForm" :rules="rules" status-icon>
        <el-form-item prop="type" label="类型">
          <el-input v-model="addTodoForm.type" placeholder="请输入待办事项类型" clearable/>
        </el-form-item>
        <el-form-item prop="content" label="内容">
          <el-input type="textarea" :rows="5" v-model="addTodoForm.content" placeholder="请输入待办事项内容"/>
        </el-form-item>
        <el-form-item prop="date" label="时间">
          <el-date-picker v-model="addTodoForm.date" type="datetime" format="YYYY-MM-DD" value-format="YYYY-MM-DD"/>
        </el-form-item>
      </el-form>
    </FormDialog>
  </div>

</template>

<style scoped>
.project-item {
  @apply pb-4 w-full cursor-pointer border-b border-r border-t p-4 transition-all
  hover:shadow-md class="md:w-1/2 lg:w-57/200";
}

.avatar-1-cls-1 {
  fill: #f9cdb7;
}

.avatar-1-cls-2 {
  fill: #e2a78d;
}

.avatar-1-cls-3 {
  fill: #213346;
}

.avatar-1-cls-4 {
  fill: #bfe1ee;
}

.avatar-1-cls-5 {
  fill: #dfe7ea;
}

.avatar-1-cls-6 {
  fill: #b46078;
}

.avatar-1-cls-7 {
  fill: #96426e;
}

.avatar-1-cls-8 {
  fill: #fff;
}

.avatar-1-cls-9 {
  fill: #fefdf5;
}

.avatar-1-avatar-1-cls-10 {
  fill: #f4eae1;
}

.avatar-1-avatar-1-cls-11 {
  fill: #f9637c;
}

.avatar-1-avatar-1-cls-12 {
  fill: #ba4264;
}

.avatar-1-avatar-1-cls-13 {
  fill: #b13a59;
}

.delete {
  @apply select-none line-through op-60;
}

:deep(.el-checkbox__inner) {
  @apply size-5;
}

:deep(.el-checkbox__inner:after) {
  border: 1px solid transparent;
  border-left: 0;
  border-top: 0;
  box-sizing: content-box;
  content: "";
  height: 13px;
  left: 6px;
  position: absolute;
  top: 1px;
  //transform: rotate(45deg) scaleY(0);
  transform-origin: center;
  transition: transform .15s ease-in .05s;
  width: 6px;
}
</style>